<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品分类管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>

</head>

<body class="hold-transition skin-red sidebar-mini">
<!-- .box-body -->

<div class="box-header with-border">
    <h3 class="box-title">商品分类管理
    </h3>
</div>

<div class="box-body">
    <ol class="breadcrumb" id="ll">
    </ol>

    <!-- 数据表格 -->
    <div class="table-box">

        <!--工具栏-->
        <div class="pull-left">
            <div class="form-group form-inline">
                <div class="btn-group" id="ins">

                </div>
            </div>
        </div>


        <!--数据列表-->
        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
            <thead>
            <tr>
                <th class="" style="padding-right:0px">
                    <input type="checkbox" class="icheckbox_square-blue">
                </th>
                <th class="sorting_asc">分类ID</th>
                <th class="sorting">分类名称</th>
                <th class="sorting">类型模板ID</th>

                <th class="text-center">操作</th>
            </tr>
            </thead>
            <tbody id="parentId">

            </tbody>
        </table>
        <!--数据列表/-->

    </div>
    <!-- 数据表格 /-->


</div>
<!-- /.box-body -->


<!-- 增加窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">商品分类编辑</h3>
            </div>
            <div class="modal-body">

                <table class="table table-bordered table-striped"  width="800px">
                    <tr id="abc">

                    </tr>
                    <tr>
                        <td>商品分类名称</td>
                        <td><input  class="form-control" placeholder="商品分类名称" id="addname">  </td>
                    </tr>
                    <tr>
                        <td>类型模板</td>
                        <td>
                            <input select2 config="options['type_template']" placeholder="商品类型模板" class="form-control" id="addtype" type="text"/>
                        </td>
                    </tr>
                </table>

            </div>
            <div class="modal-footer">
                <button onclick="add()" class="btn btn-success" data-dismiss="modal" aria-hidden="true">保存</button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>


<!-- 修改窗口 -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel1">商品分类编辑</h3>
            </div>
            <div class="modal-body">

                <table class="table table-bordered table-striped"  width="800px" id="toupeate">
                    <tr id="abcd">

                    </tr>
                    <tr id="u1">

                    </tr>
                    <tr id="u2">

                    </tr>
                </table>

            </div>
            <div class="modal-footer">
                <button onclick="update()" class="btn btn-success" data-dismiss="modal" aria-hidden="true">修改</button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    function toupdate(id){
        to(id);
        $.ajax({
            url: "/cat/getById",
            data: {id:id},
            dataType: "json",
            type: "post",
            async: false,
            success: function (data) {
                if (data.code == "666") {
                    var ss = data.data;
                    var html = '';
                    html += '<td>商品分类名称</td>' +
                        '<td><input type="hidden" name="id" id="id" value="'+ss.id+'"><input  class="form-control" placeholder="商品分类名称" name="name" value="'+ss.name+'" id="name"></td>'
                    $("#u1").html(html);
                    var sss = '';
                    sss += '<td>类型模板</td>' +
                        '<td>' +
                        '<input select2 config="options[\'type_template\']" name="typeId" id="typeId" value="'+ss.typeId+'" placeholder="商品类型模板" class="form-control" id="typeId" type="text"/>' +
                        '</td>'
                    $("#u2").html(sss);
                }
            },
            error: function () {
                alert("系统错误");
            }
        })
    }

    function to(id){
        $.ajax({
            url: "/cat/updateId",
            data: {id:id},
            dataType: "json",
            type: "post",
            async: false,
            success: function (data) {
                if (data.code == "666") {
                    var ss = data.data;
                    console.log(ss);
                    sd = '';
                    sd += '<td>上级商品分类</td>' +
                        '<td ><input type="hidden" value="'+ss.id+'" id="upid">' + ss.name + '</td>'
                    $("#abcd").html(sd);
                }
            },
            error: function () {
                alert("系统错误");
            }
        })
    }

    function update(){
        $.ajax({
            url: "/cat/update",
            data: {id:$("#id").val(),parentId:$("#upid").val(),name:$("#name").val(),typeId:$("#typeId").val(),},
            dataType: "json",
            type: "post",
            async: false,
            success: function (data) {
                if (data.code == "666") {
                    alert(data.message);
                }
            },
            error: function () {
                alert("系统错误");
            }
        })
    }



    // 增加
    function toadd(id){
        $.ajax({
            url: "/cat/getId",
            data: {id:id},
            dataType: "json",
            type: "post",
            async: false,
            success: function (data) {
                if (data.code == "666") {
                    var ss = data.data;
                    sd = '';
                    sd += '<td>上级商品分类</td>' +
                        '<td ><input type="hidden" value="'+ss.id+'" id="addid">' + ss.name + '</td>'
                    $("#abc").html(sd);
                }
            },
            error: function () {
                alert("系统错误");
            }
        })
    }

    function add(){
        $.ajax({
            url: "/cat/insert",
            data: {parentId:$("#addid").val(),name:$("#addname").val(),typeId:$("#addtype").val(),},
            dataType: "json",
            type: "post",
            async: false,
            success: function (data) {
                if (data.code == "666") {
                    alert(data.message);
                }
            },
            error: function () {
                alert("系统错误");
            }
        })
    }

    $(function (){
        getInfo();
    })
    function getInfo(){
        l();
        aaa(0);
    }
    function aaa(id){
        $.ajax({
            url: "/cat/getSelect",
            data: {parentId:id},
            dataType: "json",
            type: "post",
            async: false,
            success: function (data) {

                if (data.code == "666") {
                    var ss = data.data;

                    var ins = '';
                    ins += '<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" onclick="toadd('+id+')"><i class="fa fa-file-o"></i> 新建</button>' +
                        '<button type="button" onclick="deleteCheck()" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>' +
                        '<button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-check"></i> 刷新</button>'
                    $("#ins").html(ins)

                    var a = '';

                    console.log(data);
                    $(ss).each(function (i,e) {
                        a +='	<tr>'
                        a +='	<td><input type="checkbox" value="'+e.id+'" name="check"></td>'
                        a +='	<td>'+e.id+'</td>'
                        a +='	<td>'+e.name+'</td>'
                        a +='	<td>'+e.typeId+'</td>'
                        a +='	<td className="text-center">'
                        a +='	<button type="button" class="btn bg-olive btn-xs" value="'+e.id+'" onclick="gettwo('+e.id+')">查询下级</button>'
                        a +='	<button type="button" class="btn bg-olive btn-xs" onclick="toupdate('+e.id+')" data-toggle="modal" data-target="#updateModal">修改</button>'
                        a +='	</td>'
                        a +='	</tr>'

                    });
                    $("#parentId").html(a);
                }

            },
            error: function () {
                alert("系统错误");
            }
        })
    }
    function gettwo(id){
        ll(id);
        $.ajax({
            url: "/cat/getSelect",
            data: {parentId:id},
            dataType: "json",
            type: "post",
            async: false,
            success: function (data) {

                if (data.code == "666") {
                    var ss = data.data;

                    var a = '';

                    $(ss).each(function (i,e) {
                        a +='	<tr>'
                        a +='	<td><input type="checkbox" value="'+e.id+'" name="check"></td>'
                        a +='	<td>'+e.id+'</td>'
                        a +='	<td>'+e.name+'</td>'
                        a +='	<td>'+e.typeId+'</td>'
                        a +='	<td className="text-center">'
                        a +='	<button type="button" class="btn bg-olive btn-xs" value="'+e.id+'" onclick="getthree('+e.id+')">查询下级</button>'
                        a +='	<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#updateModal" onclick="toupdate('+e.id+')">修改</button>'
                        a +='	</td>'
                        a +='	</tr>'
                    });
                    $("#parentId").html(a);
                }

            },
            error: function () {
                alert("系统错误");
            }
        })
    }
    function getthree(id){
        ll2(id);
        aaa(id);
    }
    function ll(id){
        $.ajax({
            url: "/cat/getId",
            data: {id:id},
            dataType: "json",
            type: "post",
            async: false,
            success: function (data) {
                if (data.code == "666") {
                    var ss = data.data;
                    var ins = '';
                    ins += '<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" onclick="toadd('+ss.id+')"><i class="fa fa-file-o"></i> 新建</button>' +
                        '<button type="button" class="btn btn-default" title="删除" onclick="deleteCheck()"><i class="fa fa-trash-o"></i> 删除</button>' +
                        '<button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();" ><i class="fa fa-check"></i> 刷新</button>'
                    $("#ins").html(ins)
                    var a = '';
                    a +='<li>'
                    a +='<a href="javascript:getInfo(1)" >顶级分类列表</a>'
                    a +='</li>'
                    a += '<li>'
                    a += '<a href="javascript:gettwo('+ss.id+')" >'+ss.name+'</a>'
                    a += '</li >'
                    $("#ll").html(a);
                }

            },
            error: function () {
                alert("系统错误");
            }
        })
    }
    function ll2(id){
        $.ajax({
            url: "/cat/getId",
            data: {id:id},
            dataType: "json",
            type: "post",
            async: false,
            success: function (data) {
                if (data.code == "666") {
                    var ss = data.data;
                    var a = '';
                    a += '<li>'
                    a += '<a href="javascript:getthree('+ss.id+')" >'+ss.name+'</a>'
                    a += '</li >'
                    $("#ll").append(a);
                }

            },
            error: function () {
                alert("系统错误");
            }
        })
    }
    function l(id) {
        $.ajax({
            url: "/cat/getId",
            data: {id: id},
            dataType: "json",
            type: "post",
            async: false,
            success: function (data) {
                if (data.code == "666") {
                    var ll = '';
                    ll += '<li>' +
                        '<a href="javascript:getInfo(1)" >顶级分类列表</a>' +
                        '</li>'
                    $("#ll").html(ll);
                }

            },
            error: function () {
                alert("系统错误");
            }
        })
    }



    //批量删除
    function deleteCheck() {
        if (confirm("是否删除")) {
            var ids = []
            $("[type=checkbox]").each(function (i, e) {
                if ($(e).prop("checked")) {
                    ids.push($(e).val())
                }
            })
            if (ids.length <= 0) {
                alert("请选择要删除的数据")
                return
            }
            $.ajax({
                url: "/cat/deleteCheck?ids=" + ids,
                type: "get",
                dataType: "json",
                async: false,
                success: function (result) {
                    if (result.code == "666") {
                        alert(result.message)
                        window.location.reload();
                    } else {
                        alert("删除失败,还有子节点")
                    }
                },
                error: function () {
                    alert("异常")
                }
            })
        }
    }
</script>